<template>
  <div class="lesson-list-wrapper ml-center">
    <!-- 筛选类表 -->
    <div class="list-filter">
      <ul>
        <!-- 占位 -->
      </ul>
    </div>

    <!-- 课程列表 -->
    <div class="lesson-list-container">
      <ul class="lesson-list">
        <li style="margin-right: 24px" v-for="(item, index) in list" :key="index" class="list-item" @click="handleLessonClick(item)">
          <div class="img-box">
            <img :src="item.cover" alt="">
          </div>
          <div class="lesson-content" style="text-align: left">
            <h2 class="title" v-html="item.name">

            </h2>
            <p>
              <span v-if="item.level === 0">{{ `入门` }}</span>
              <span v-if="item.level === 1">{{ `初级` }}</span>
              <span v-if="item.level === 2">{{ `中级` }}</span>
              <span v-if="item.level === 3">{{ `高级` }}</span>

              <span class="number"><i class="iconfont">&#xe607;</i>{{ item.buySum }}人</span>
              <span class="comment">{{ item.lessonSum }}课时</span>
            </p>
            <p class="price">
              <span class="old">¥{{ item.price }}.00</span>
            </p>
          </div>
        </li>

        <div v-if="list.length === 0 || list === null" class="list-empty">
          <p>暂无数据</p>
        </div>
      </ul>
    </div>

  </div>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {

    }
  },
  methods: {
    // 课程点击事件
    handleLessonClick (item) {
      let url = this.$router.resolve({
        path: '/course/'+item.courseId
      });
      window.open(url.href, '_blank')
    }
  },

}
</script>
<style lang="stylus" scoped>
  @import '~assets/stylus/variables.styl';
  @import '~assets/stylus/mixin.styl';
  .lesson-list-wrapper
    .list-filter
      padding: 20px 12px;
      border-top: 0px solid $border-second-color;
      & > ul
        display: inline-block;
      .filter-item
        display: inline-block;
        margin-right: 12px;
        padding: 4px 12px;
        border-radius: 12px;
        line-height: 16px;
        font-size: 12px;
        color: $font-second-color;
        cursor: pointer;
        &.active
          background-color: $font-second-color;
          color: #fff;
      .hide-course-box
        float: right;
        color: $font-three-color;
        font-size: 12px;
        .mooc-switch
          margin-right: 15px;
      .like-number
        display: inline-block;
        margin-left: 25px;
        padding: 0 12px;
        line-height: 24px;
        border-radius: 12px;
        background-color: rgba(204,136,0,.1);
        color: $theme-orange-dark-color;
        font-size: 12px;
        cursor: pointer;
        &:hover, &.active
          color: #fff;
          background-color: rgba(204,136,0,1);
    .lesson-list
      .list-item
        display: inline-block;
        vertical-align: top;
        margin-right: 24px;
        margin-bottom: 36px;
        width: 270px;
        cursor: pointer;
        &:hover
          .img-box
            box-shadow: 0 8px 4px 0 rgba(7,17,27,0.1);
          .lesson-content
            .title
              color: $theme-red-color;
        &:nth-child(5n) {
          margin-right: 0;
        }
        .img-box
          position: relative;
          border-radius: 16px;
          img-box(270px, 160px);
          & > img
            object-fit: cover;
            border-radius: 16px;
          .type
            position: absolute;
            left: -8px;
            top: 8px;
            padding: 0 8px;
            border-radius: 12px;
            border: 2px solid #fff;
            line-height: 20px;
            background: linear-gradient(90deg,#fa0 17%,#f76b1c 100%);
            font-size: 12px;
            font-weight: 700;
            color: #fff;
          .rate
            position: absolute;
            right: -8px;
            top: 8px;
            padding: 0 8px;
            border-radius: 12px;
            border: 2px solid #fff;
            line-height: 20px;
            background: linear-gradient(-90deg,#65da98 0,#0cba4d 100%);
            font-size: 12px;
            font-weight: 700;
            color: #fff;
          .lesson-mask
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 74px;
            background: linear-gradient(-180deg,rgba(7,17,27,0) 0,rgba(7,17,27,.6) 97%);
            border-bottom-left-radius: 16px;
            border-bottom-right-radius: 16px;
            .teacher-info
              position: absolute;
              left: 16px;
              bottom: 16px;
              & > img
                margin-right: 12px;
                width: 36px;
                height: 36px;
                background-color: #eee;
                border-radius: 50%;
              .name
                font-size: 14px;
                font-weight: 700;
                color: #fff;
            .update-info
              position: absolute;
              right: 16px;
              bottom: 14px;
              & > span
                display: block;
                line-height: 20px;
                color: #fff;
                font-size: 12px;
        .lesson-content
          padding: 0 8px;
          .title
            height  48px
            margin-top: 16px;
            font-size: 16px;
            font-weight: 700;
            line-height: 24px;
            color: $font-first-color;
            word-break: break-all;
            multline-ellipsis(2);
          & > p
            line-height: 20px;
            color: $font-four-color;
            font-size: 12px;
            span
              line-height: 24px;
              cursor: pointer;
            &.desc
              margin-top: 4px;
              multline-ellipsis(2);
              &:hover
                color: $font-second-color;
            &.price
              margin-bottom: 4px;
            .number
              margin-left: 10px;
            .comment
              float: right;
            .old
              color: $font-second-color;
            .new
              margin-left: 5px;
              color: $font-second-color;
              text-decoration: line-through;
            .price-right
              float: right;
              .like
                margin-right: 10px;
                cursor: pointer;
                &:hover
                  color: $font-second-color;
                &.active
                  color: $theme-red-color;
              .cart
                padding-left: 10px;
                border-left: 2px solid $border-second-color;
                &:hover
                  color: $font-second-color;
            .discount
              padding: 4px;
              border-radius: 4px;
              background-color: $theme-red-color;
              opacity: 0.6;
              line-height: 20px;
              color: #fff;
  .list-empty
    padding: 10px 0;
    text-align: center;
  .lesson-list-container > ul
    margin: 0 auto;
    width: 1200px;
</style>
